<script lang="ts" setup>
import type { VbenFormProps } from '#/adapter/form'
import type { VxeGridProps } from '#/adapter/vxe-table'
import { Button } from 'ant-design-vue'
import TableAction from '#/components/TableAction/index.vue'
import { usePagePermission } from '#/hooks/usePermission'
import { useTableCURD } from '#/hooks/useTableList'
import AddEditModal from './AddEditModal.vue'
import { columns, formSchema } from '../data/table'
import { PageApi } from '../use/api'
import type { TableListItem } from '../use/api'
import { PAGE_AUTH_CODE_PREFIX } from '../use/config'
import { $t } from '@vben/locales'

const props = withDefaults(
    defineProps<{
        queryParams?: Record<string, any>
    }>(),
    {
        queryParams: () => ({})
    }
)

const formOptions: VbenFormProps = {
    schema: formSchema
}

const gridOptions: VxeGridProps<any> = {
    columns,
    proxyConfig: {
        ajax: {
            query: async ({ page }, formValues) => {
                const res = await PageApi.getPageList({
                    ...formValues,
                    ...props.queryParams,
                    limit: page.pageSize,
                    page: page.currentPage
                })
                return {
                    items: res.records,
                    total: res.total
                }
            }
        }
    }
}

/**
 * 表格配置
 */
const {
    Grid,
    GridApi,
    FormModal,
    add: handleCreate,
    edit: handleEdit,
    del: handleDelete,
    handleSuccess,
    delBatch: handleDeleteBatch,
    modalType,
    reload
} = useTableCURD<TableListItem>({
    formOptions,
    gridOptions,
    modalOptions: {
        connectedComponent: AddEditModal
    },
    delApi: PageApi.delete
})

// 权限配置
const { getPagePermissionKey, hasPagePermission } = usePagePermission(PAGE_AUTH_CODE_PREFIX)

function handleCreateFix() {
    handleCreate({
        tableData: GridApi.grid.getTableData().tableData
    })
}

/**
 * table 操作
 * @param record
 */
function getActions(record: TableListItem) {
    const arr: any[] = [
        {
            icon: 'clarity:note-edit-line',
            tooltip: $t('common.edit'),
            onClick: () => {
                handleEdit(record, {
                    tableData: GridApi.grid.getTableData().tableData
                })
            },
            auth: getPagePermissionKey('edit')
        },
        {
            icon: 'ant-design:delete-outlined',
            color: '#bb1b1b',
            tooltip: $t('common.delete'),
            popConfirm: {
                title: $t('common.confirmDelete'),
                placement: 'left',
                onConfirm: () => {
                    handleDelete(record)
                }
            },
            auth: getPagePermissionKey('delete')
        }
    ]

    return arr
}

defineExpose({
    GridApi,
    reload
})
</script>

<template>
    <Grid>
        <template #toolbar-tools>
            <view class="flex gap-2">
                <Button v-if="hasPagePermission('add')" type="primary" @click="handleCreateFix">
                    {{ $t('common.create') }}
                </Button>
                <Button
                    v-if="hasPagePermission('delete')"
                    danger
                    type="primary"
                    @click="handleDeleteBatch"
                >
                    {{ $t('common.delete') }}
                </Button>
            </view>
        </template>

        <template #action="{ row }">
            <TableAction :actions="getActions(row)" />
        </template>
    </Grid>
    <FormModal @success="handleSuccess" :modal-type="modalType" />
</template>
